<template>
  <view>
    <view class="row flex">
      <!-- 左侧icon和文字 -->
      <view class="panel-left flex">
        <uni-icons :type="iconType" size="23"></uni-icons>
        <view class="text">
          {{text}}
          <slot></slot>
        </view>
      </view>

      <!-- 右侧数字和> -->
      <view class="panel-right flex">
        <view class="num" v-if="num>=0">
          {{num}}
        </view>
        <uni-icons type="right"></uni-icons>
      </view>
    </view>
  </view>
</template>

<script setup>
  defineProps(['iconType', 'text', 'num']);
</script>

<style lang="scss" scoped>
  .row {
    padding: 18px 10px;
    border-bottom: 1px solid #ededed;

    .panel-left {

      .text {
        margin-left: 10px;
      }

    }

    .panel-right {
      .num {
        margin-right: 5px;
        color: $text-color-second;
      }
    }
  }
</style>